<template>
  <el-drawer
    v-model="drawer"
    class="drawer-layout"
    size="400px"
    :title="title"
    direction="rtl"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="info-container">
      <div class="info-container_body">
        <div class="form-section">
          <el-form ref="refFrom" label-position="top" :model="form.model">
            <AgelFormGrid :items="form.items" :span="24" :gutter="16">
              <template #slot-price>
                <el-input type="number" v-model="form.model.price"><template #append>元</template></el-input>
              </template>
            </AgelFormGrid>
          </el-form>
        </div>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { addPriceAccessory, updatePriceAccessory } from '@/api/operation/priceAccessory/index';
import { BizPriceAccessoryVo, defaultModel } from '@/api/operation/priceAccessory/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { price_type, accessory_price_scope } = toRefs<any>(proxy?.useDict('price_type', 'accessory_price_scope'));
import { centToYuan, yuanToCent, secToMinu, minuToSec } from '@/utils/index';

const drawer = ref(false);
const title = ref('新增定价');
const isEdit = ref(false);
const form = reactive<any>({
  model: defaultModel(),
  items: [
    { prop: 'name', label: '耗材名称', required: true, attrs: { showWordLimit: true, maxlength: 20 } },
    {
      prop: 'scope',
      label: '类型',
      slot: 'agel-select',
      required: true,
      attrs: {
        options: accessory_price_scope
      }
    },
    {
      prop: 'bindPriceType',
      label: '配置类型',
      slot: 'agel-select',
      required: true,
      attrs: {
        options: price_type
      }
    },
    { prop: 'price', label: '单价', slot: 'slot-price', required: true },
    { prop: 'remarks', label: '备注', attrs: { type: 'textarea', showWordLimit: true, maxlength: 100 } }
  ]
});
const loading = ref(false);
const refFrom = ref<ElFormInstance>();
const emits = defineEmits(['close', 'success']);

const open = () => {
  title.value = '新增定价';
  isEdit.value = false;
  drawer.value = true;
  refFrom.value?.clearValidate();
};
const openEdit = (row: any) => {
  title.value = '编辑定价';
  isEdit.value = true;
  form.model = { ...row, price: centToYuan(row.price) };
  drawer.value = true;
  refFrom.value?.clearValidate();
};
/** 取消 */
const handleClose = () => {
  form.model = defaultModel();
  refFrom.value?.clearValidate();
  drawer.value = false;
  emits('close');
};
/** 确认 */
const handleSubmit = async () => {
  if (!refFrom.value) return;
  refFrom.value.validate((valid, fields) => {
    if (valid) {
      handleRequest();
    } else {
      console.log('error submit!', fields);
    }
  });
};
const handleRequest = async () => {
  loading.value = true;
  let serviceMethod = isEdit.value ? updatePriceAccessory : addPriceAccessory;
  let data = { ...form.model, price: yuanToCent(form.model.price) };
  let res = await serviceMethod(data);
  loading.value = false;
  if (res.code == 200) {
    proxy?.$modal.msgSuccess('操作成功！');
    emits('success');
    drawer.value = false;
  } else {
    proxy?.$modal.msgError(res.msg || '操作失败！');
  }
};
defineExpose({ open, openEdit });
</script>
